/*Copyright (c) 2020 Orca Data Technology(Xi'an)CO.LTD. All rights reserved. * Create by Jisr on 2022/3/3 3:13 PM*/
import './index.less';
import {Fade, useBoolean, Accordion, AccordionItem} from '@chakra-ui/react';
import React, {useEffect, useState} from 'react';
import AddProject from '@/components/project/addProject';
import ProjectItem from '@/components/project/item';
import {ProjectAPI} from '@/api';

import StageList from '@/template/stageList';
const Dashboard = () => {
    const [isOverAdd, setIsOverAdd] = useBoolean();
    const [projectList, setProjectList] = useState<ProjectDir[]>([]);
    const [activeProject, setActiveProject] = useState<ProjectDir | undefined>();

    useEffect(() => {
        ProjectAPI.getProject().then((res: ProjectDir[]) => {
            if (res.length === 0) {
                setActiveProject(undefined);
            } else {
                setActiveProject(res[0]);
            }
            setProjectList([...res]);
        });
    }, []);
    const onAfterDeleteItem = (projectList: ProjectDir[]) => {
        if (activeProject) {
            const result = projectList.find((item) => activeProject.id === item.id);
            if (!result) {
                if (projectList.length === 0) {
                    setActiveProject(undefined);
                } else {
                    setActiveProject(projectList[0]);
                }
            }
        }

        setProjectList(projectList);
    };
    const onClickProjectDir = (projectDir: ProjectDir) => {
        setActiveProject(projectDir);
    };
    return (
        <main className="dashboard-page">
            <header className="header"></header>
            <section className="content">
                <aside className="aside">
                    <div className="aside-add-btn" onMouseEnter={setIsOverAdd.on} onMouseLeave={setIsOverAdd.off}>
                        <span>项目</span>
                        <Fade in={isOverAdd}>
                            <AddProject
                                list={projectList}
                                onChange={(list: ProjectDir[]) => {
                                    if (!activeProject) {
                                        setActiveProject(list[0]);
                                    }
                                    setProjectList([...list]);
                                }}
                            />
                        </Fade>
                    </div>
                    <Accordion h="calc(100% - 40px)" pt="10px" allowMultiple overflowY="auto">
                        {projectList.map((item, index) => {
                            return (
                                <AccordionItem
                                    h="40px"
                                    className={
                                        activeProject?.id === item.id
                                            ? 'project-class active-project-class'
                                            : 'project-class'
                                    }
                                    key={index}
                                    onClick={() => {
                                        onClickProjectDir(item);
                                    }}>
                                    <ProjectItem name={item.name} id={item.id} onAfterDelete={onAfterDeleteItem} />
                                </AccordionItem>
                            );
                        })}
                    </Accordion>
                </aside>
                <section className="section">{activeProject && <StageList project={activeProject} />}</section>
            </section>
        </main>
    );
};
export default Dashboard;
